<template>
  <!-- View层 -->
  <div id="app">
    内容：
    <span>{{text}}</span>
    <br />
    <!-- v-mode实现了：View->Model -->
    <!-- <input type="text" v-model="text"/> -->

    <input type="text" :value="text" @input="handle($event)" />
  </div>
</template>

<script>
export default {
  data() {
    /* Model层 */
    return {
      text: "珠峰培训"
    };
  },
  methods: {
    handle(ev) {
      console.log(ev);
      this.text = ev.target.value;
    }
  },
  mounted() {
    /*
     * Vue内置实现的是ViewModel层
     *  =>监听数据的改变（Vue2.0 defineProperty / Vue3.0 Proxy）
     */
    setTimeout(_ => {
      this.text = "周老师很丑 ┭┮﹏┭┮";
    }, 1000);
  }
};
</script>